<template>
  <div class="g-container" style="height: 100%;padding: 20px;">
    <div id="chart" style="height: 100%;margin-top: 1%;" />
  </div>
</template>

<script>
import echarts from 'echarts'
import axios from "@/utils/requestdp";
import dayjs from 'dayjs'

import defaultmixins from '@/mixins/bigScreen/defaultmixins'
export default {
  name: 'SevendayForcastTaian',
  mixins: [defaultmixins],
  data() {
    return {
      uniqueID: ''
    }
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById('chart'))
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
    this.loadData();
  },
  methods: {
    loadData() {
      axios.get(`/wInfoController/getForcastWeather?date=${dayjs().format()}`).then(res => {
        if (Object.keys(res.data).length > 0) {
          let scale = this.$root.setting.scale
          let xAxisArr = res.data.weather.map(v => v.date);
          let lowArr = res.data.weather.map(v => v.night_air_temperature);
          let highArr = res.data.weather.map(v => v.day_air_temperature);
          let avgArr = res.data.weather.map(v => (v.day_air_temperature - v.night_air_temperature) / 2);
          let option = {
            title: null,
            tooltip: null,
            legend: {
              data: [{
                name: '最低温度',
                textStyle: {
                  color: '#FFFD9B',
                  fontSize: 48 * scale
                }
              }, {
                name: '最高温度',
                textStyle: {
                  color: '#5BFBCC',
                  fontSize: 48 * scale
                }
              }, {
                name: '平均温度',
                textStyle: {
                  color: '#4FC7FF',
                  fontSize: 48 * scale
                }
              }],
              right: scale * 2
            },

            grid: {
              left: '5%',
              right: '5%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                  textStyle: {
                    color: '#A0C8DB',
                    fontSize: 40 * scale
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: '#4FC7FF'
                  }
                },
                data: xAxisArr
              }
            ],
            yAxis: [
              {
                type: 'value',
                splitLine: {
                  show: false
                },
                axisLabel: {
                  textStyle: {
                    color: '#A0C8DB',
                    fontSize: 40 * scale
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: '#4FC7FF'
                  }
                }
              }
            ],
            series: [
              {
                name: '最低温度',
                type: 'line',
                itemStyle: {
                  normal: {
                    color: '#FFFD9B',
                    lineStyle: {
                      color: '#FFFD9B',
                      width: 1
                    },
                    areaStyle: {
                      color: '#FFFD933B',
                      zlevel: 2
                    }
                  }
                },
                data: lowArr,
                zlevel: 3,
                symbol: 'circle'
              },
              {
                name: '最高温度',
                type: 'line',
                itemStyle: {
                  normal: {
                    color: '#5BFBCC',
                    lineStyle: {
                      color: '#5BFBCC',
                      width: 1
                    },
                    areaStyle: {
                      color: 'rgba(91, 251, 204, 0.2)'
                    }
                  }
                },
                data: highArr,
                zlevel: 2,
                symbol: 'circle'
              },
              {
                name: '平均温度',
                type: 'line',
                itemStyle: {
                  normal: {
                    color: '#4FC7FF',
                    lineStyle: {
                      color: '#4FC7FF',
                      width: 1
                    },
                    areaStyle: {
                      color: 'rgba(79, 199, 255, 0.2)',
                      zlevel: 0
                    }
                  }
                },
                data: avgArr,
                zlevel: 1,
                symbol: 'circle'
              }
            ]
          }
          this.myChart.setOption(option)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
